ElementUI table标签展开行 |
您所在的位置：网站首页 › el-table expand默认展开 › ElementUI table标签展开行 |
ElementUI table标签展开行
|
一、概述 当行内容过多并且不想显示横向滚动条时，可以使用 Table 展开行功能。 官方示例： test.vue {{ props.row.name }} {{ props.row.shop }} {{ props.row.id }} {{ props.row.shopId }} {{ props.row.category }} {{ props.row.address }} {{ props.row.desc }} .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } export default { data() { return { tableData: [{ id: '12987122', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }] } } }刷新页面，效果如下：  1.png二、全部展开增加属性:default-expand-all="true" test.vue完整代码： {{ props.row.name }} {{ props.row.shop }} {{ props.row.id }} {{ props.row.shopId }} {{ props.row.category }} {{ props.row.address }} {{ props.row.desc }} .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } export default { data() { return { tableData: [{ id: '12987122', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }] } } }刷新页面，效果如下：  1.png三、指定某一行默认展示需要增加属性 :row-key="getRowKeys" :expand-row-keys="expands" 比如：指定第二行，默认展开 test.vue完整代码： {{ props.row.name }} {{ props.row.shop }} {{ props.row.id }} {{ props.row.shopId }} {{ props.row.category }} {{ props.row.address }} {{ props.row.desc }} .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } export default { data() { return { tableData: [{ id: '12987122', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }], // 获取row的key值 getRowKeys(row) { return row.id; }, // 要展开的行，数值的元素是row的key值 expands: [] } }, mounted() { // 在这里你想初始化的时候展开哪一行都可以了 this.expands.push(this.tableData[1].id); } }刷新页面，效果如下：  1.png四、点击某行，默认展开现有一个需求，展开某行后，再次刷新页面后，默认展开刚才点击的那一行。 需要添加属性 @current-change 这里还使用了localStorage用来存储，点击过的行id。实际生产环境，可以使用vuex来存储点击的id。 test.vue完整代码如下： {{ props.row.name }} {{ props.row.shop }} {{ props.row.id }} {{ props.row.shopId }} {{ props.row.category }} {{ props.row.address }} {{ props.row.desc }} .demo-table-expand { font-size: 0; } .demo-table-expand label { width: 90px; color: #99a9bf; } .demo-table-expand .el-form-item { margin-right: 0; margin-bottom: 0; width: 50%; } export default { data() { return { tableData: [{ id: '12987122', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987123', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987125', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }, { id: '12987126', name: '好滋好味鸡蛋仔', category: '江浙小吃、小吃零食', desc: '荷兰优质淡奶，奶香浓而不腻', address: '上海市普陀区真北路', shop: '王小虎夫妻店', shopId: '10333' }], // 获取row的key值 getRowKeys(row) { return row.id; }, // 要展开的行，数值的元素是row的key值 expands: [] } }, mounted() { console.log('check_id',localStorage.getItem('check_id')) // 默认将check_id添加到列表中，用于刷新默认展开指定的行 this.expands.push(localStorage.getItem('check_id')); }, methods:{ toggleRowExpansion(row){ // console.log("toggleRowExpansion",row) // 清空数组 this.expands = []; // 添加指定的id this.expands.push(row.id); // 保存点击的id localStorage.setItem('check_id',row.id) }, } }刷新页面，点击第3行，然后刷新页面，效果如下：  1.png本文参考链接： https://segmentfault.com/q/1010000008981772 |
【本文地址】
今日新闻 |
推荐新闻 |